<template>
  <div class="box">
    <el-card>
      <el-row>
        <el-col :span="5">
          <el-button class="order" @click="order">
            <div class="flx">
              <i class="el-icon-s-order" style="font-size: 30px"></i>
              <el-statistic
                :value="totalOrders"
                :title="title1"
                class="text">
              </el-statistic>
            </div>
          </el-button>
        </el-col>
        <el-col :span="5">
          <el-button class="tranction" @click="tranction">
            <div class="flx">
              <i class="el-icon-s-data" style="font-size: 30px"></i>
              <el-statistic
                group-separator=","
                :precision="2"
                :value="totalSales"
                :title="title2"
                class="text">
              </el-statistic>
            </div>
          </el-button>
        </el-col>
        <el-col :span="5">
          <el-button class="pay" @click="pay">
            <div class="flx">
              <i class="el-icon-download" style="font-size: 30px"></i>
              <el-statistic
                :value="value3"
                :title="title3"
                class="text">
              </el-statistic>
            </div>
          </el-button>
        </el-col>
        <el-col :span="5">
          <el-button class="recipt" @click="recipt">
            <div class="flx">
              <i class="el-icon-s-claim" style="font-size: 30px"></i>
              <el-statistic
                :value="value4"
                :title="title4"
                class="text">
              </el-statistic>
            </div>
          </el-button>
        </el-col>
        <el-col :span="4">
          <el-button class="logistics" @click="logistics">
            <div class="flx">
              <i class="el-icon-truck" style="font-size: 30px"></i>
              <el-statistic
                :value="value5"
                :title="title5"
                class="text">
              </el-statistic>
            </div>
          </el-button>
        </el-col>
      </el-row>
    </el-card>
    <div style="width: 50%; margin-top: 100px">
      <div id="char" style="width: 100%; height: 200px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getTodaySalesAmount, getTodayOrderCount, getSalesData ,getSaleTotal,getAllOrder} from '@/api/sale/sale'; // 确保你有这个 API

export default {
  data() {
    return {
      title1: '今日订单',
      title2: '交易额',
      title3: '待付款',
      title4: '待收款',
      title5: '物流',
      totalOrders: 0,
      totalSales: 0,
      value3: 0,
      value4: 0,
      value5: 1,
      loading: false,
    };
  },
  mounted() {
    this.fetchStatistics();
  },
  methods: {
    order() {
      this.$router.push('/order');
    },
    tranction() {
      this.$router.push('/tranction');
    },
    pay() {
      this.$router.push('/pay');
    },
    recipt() {
      this.$router.push('/recipt');
    },
    logistics() {
      this.$router.push('/logistics');
    },
    async fetchStatistics() {
      this.loading = true;
      try {
        const orderResponse = await getTodayOrderCount();
        this.totalOrders = orderResponse.data || 0;

        const salesResponse = await getTodaySalesAmount();
        this.totalSales = salesResponse.data || 0;
        const salesDataResponse = await getSalesData(); // 这里替换为你的实际 API
        const dataTime = await salesDataResponse;
        const totalPrice = await getSaleTotal();
        const Allorder = await getAllOrder();
        this.updateChart(totalPrice.data, dataTime.data, Allorder.data);
      } catch (error) {
        console.error('Error fetching statistics:', error);
      } finally {
        this.loading = false;
      }
    },
    updateChart(  dates, orders, sales) {
      let chartDom = document.getElementById('char');
      let myChart = echarts.init(chartDom);

      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['订单', '交易额']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dates
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '订单',
            type: 'line',
            // stack: 'Total',
            data: sales,
            itemStyle: {
              color: '#ff6347' }
          },
          {
            name: '交易额',
            type: 'line',
            stack: 'Total',
            data: orders,
            itemStyle: {
              color: '#4682b4' }
          }
        ]
      };

      myChart.setOption(option);
    }
  }
};
</script>

<style scoped lang="scss">
.box {
  padding: 10px 5px;

  .order,
  .tranction,
  .pay,
  .recipt,
  .logistics {
    border: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .flx {
    display: flex;
    justify-content: space-between;

    .text {
      display: flex;
      margin-left: 5px;
      align-items: center;
    }
  }
}
</style>
